<template>
  <el-form ref="supportedBankForm" :model="supportedBankForm"  label-width="80px">
    <el-form-item label="银行名称">
      <el-select v-model="selectedBank" placeholder="">
        <el-option label="全部" value=""></el-option>
        <el-option :label="item.bankName" :value="item.bankCode" v-for="(item, key) in allBankList" :key="key"></el-option>
      </el-select>
      <el-button type="primary" icon="search" @click="searchBank" class="margin-left-15">查询</el-button>
      <el-button type="primary" @click="joinBank">加入</el-button>
    </el-form-item>
    <el-form-item>
      <el-table border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="bankName"
          label="银行名称"
          min-width="100">
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <el-tooltip content="删除" placement="top">
              <el-button @click.native.prevent="deleteRow(scope.$index, scope.row)"><i class="el-icon-minus"></i></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </el-form>
</template>
<script>
  import { supportedBank, bankList, updateSupportedBankList } from '@/services/getData'
  export default {
    name: 'supportedBank-edit',
    data() {
      return {
        selectedBank: '',
        tableData:[],
        allBankList:[],
        bankCode:''
      }
    },
    props: {
      supportedBankForm: {
        type: Object,
        default() {
          return {
            tradeType: 1, // 交易类型
            channelCode: '' // 通道别名
          }
        }
      },
      rmd: {
        type: Number,
        default: 0
      }
    },
    watch: {
      rmd: function() {
        this.supportedBankList(this.supportedBankForm.tradeType, '')
      }
    },
    created() {
      this.loadAllBankList()
      this.supportedBankList(this.supportedBankForm.tradeType, '')
    },
    methods: {

      // 加载所有的银行列表
      async loadAllBankList(){
        try {
          const res = await bankList({
            tradeType: this.supportedBankForm.tradeType,
            bankCode: ''
          })
          if (res.resultCode == 1) {
            this.allBankList = res.data
          } else {
            throw new Error(res.message)
          }
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },

      // 加载支持的银行列表
      async supportedBankList(tradeType, bankCode){
        try {
          const res = await supportedBank({
            operatorName: sessionStorage.getItem('ms_username'),
            operatedMenu: "代收通道管理",
            operatedButton: "查看支持银行卡列表",
            tradeType: tradeType,
            bankCode: bankCode,
            channelCode: this.supportedBankForm.channelCode
          })

          if (res.resultCode == 1) {
            this.tableData = res.bankList
          } else {
            throw new Error(res.message)
          }
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },

      // 更新支持的银行列表
      async updateSupportedBankList(updateType, selectedBank){
        this.bankCodeFindBankName(selectedBank)
        try {
          const res = await updateSupportedBankList({
            operatorName: sessionStorage.getItem('ms_username'),
            operatedMenu: "代收通道管理",
            operatedButton: "更新支持银行卡列表",
            channelCode: this.supportedBankForm.channelCode,
            updateType: updateType,
            tradeType: this.supportedBankForm.tradeType,
            bankCode: selectedBank,
            bankName: this.bankCodeFindBankName(selectedBank)
          })
          if (res.resultCode == 1) {
            let $message = updateType == 0 ? '新增成功' : '删除成功'
            this.$message({
              type: 'success',
              message: $message
            })
            this.supportedBankList(this.supportedBankForm.tradeType, '')
          } else {
            throw new Error(res.message)
          }
        } catch (err) {
          console.log('获取数据失败', err)
        }
      },

      // 搜索银行卡
      searchBank() {
        this.supportedBankList(this.supportedBankForm.tradeType, this.selectedBank)
      },

      // 删除当前行
      deleteRow(index, row) {
        this.updateSupportedBankList(1, row.bankCode)
      },

      // 加入银行卡
      joinBank() {
        if (this.selectedBank == '') {
          this.$message({
            type: 'error',
            message: "请选择您要加入的银行卡"
          })
          return false
        }
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.selectedBank === this.tableData[i].bankCode) {
            this.$message({
              type: 'error',
              message: "此银行卡已存在当前的列表中"
            })
            return false
          }
        }
        this.updateSupportedBankList(0, this.selectedBank)
      },

      // 根据银行code查找银行名称
      bankCodeFindBankName(bankCode) {
        for(let i in this.allBankList) {
          if (bankCode == this.allBankList[i].bankCode) {
            return this.allBankList[i].bankName
          }
        }
      }


    }
  }
</script>
<style lang="less" scoped>
  .margin-left-15 {
    margin-left: 15px;
  }
</style>
